<div class="ProjectIntegrationList">
    <nz-table [nzData]="this.project.integrations" [nzNoResult]="nointeg" #integList>
        <thead>
        <tr>
            <th nzWidth="100px">Name</th>
            <th nzWidth="100px">Model</th>
            <th nzWidth="300px">Configuration</th>
            <th nzWidth="25px"></th>
        </tr>
        </thead>
        <tbody>
        <tr *ngFor="let p of integList.data">
            <td>
                {{ p.name }}
                <span *ngIf="p.model.public" nz-tooltip nzTooltipTitle="Public integration" nzTooltipPlacement="top">
                    <i nz-icon nzType="check-circle" nzTheme="outline" class="green"></i>
                </span>
            </td>
            <td>
                {{ p.model.name}}
            </td>
            <td>
                <form nz-form>
                    <nz-form-item *ngFor="let k of p.config | keys">
                        <nz-form-label [nzSpan]="12">
                            {{k}}
                            <span *ngIf="p.config[k].description" nz-tooltip
                                  [nzTooltipTitle]="p.config[k].description" nzTooltipPlacement="right">
                                    <i nz-icon nzType="info-circle" nzTheme="outline"></i>
                             </span>
                        </nz-form-label>
                        <nz-form-control>
                            <ng-container *ngIf="p.config[k].static">
                                <input nz-input type="text" name="{{k}}-value" *ngIf="p.config[k].type !== 'password'" [(ngModel)]="p.config[k].value" readonly>
                                <input nz-input type="password" name="{{k}}-value" *ngIf="p.config[k].type === 'password'" [(ngModel)]="p.config[k].value" readonly>
                            </ng-container>
                            <ng-container *ngIf="!p.config[k].static">
                                <input type="checkbox" name="{{k}}-value" [(ngModel)]="p.config[k].value" *ngIf="p.config[k].type === 'boolean'" (keydown)="p.hasChanged = true" [readonly]="p.model.public"/>
                                <input nz-input type="text" name="{{k}}-value" [(ngModel)]="p.config[k].value" *ngIf="p.config[k].type === 'string'" (keydown)="p.hasChanged = true" [readonly]="p.model.public">
                                <ng-container *ngIf="p.config[k].type === 'text'">
                                    <codemirror name="{{k}}-value" [(ngModel)]="p.config[k].value" [config]="codeMirrorConfig" #codeMirror (keydown)="p.hasChanged = true"></codemirror>
                                </ng-container>
                                <input nz-input type="password" name="{{k}}-value" [(ngModel)]="p.config[k].value" *ngIf="p.config[k].type === 'password'" (keydown)="p.hasChanged = true">
                            </ng-container>
                        </nz-form-control>
                    </nz-form-item>
                </form>
            </td>
            <td>
                <ng-container *ngIf="project.permissions.writable && !p.model.public">
                    <button *ngIf="!p.hasChanged" nz-button nzDanger nzType="primary" [nzLoading]="loading" [disabled]="loading"
                        nz-popconfirm nzPopconfirmTitle="Are you sure you want to delete this integration ?" (nzOnConfirm)="deleteIntegration(p)">
                        Delete
                    </button>
                    <button nz-button nzType="primary" type="button" *ngIf="p.hasChanged" [nzLoading]="loading" (click)="updateIntegration(p)">Save</button>
                </ng-container>
            </td>
        </tr>
        </tbody>
    </nz-table>
    <ng-template #nointeg>
        <nz-alert nzType="info" nzMessage="There is no integration"></nz-alert>
    </ng-template>
</div>
